<template>
    <div class="app-container">
        <!--查询部分-->
        <div class="query-form">
            <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="90px" :inline="true">
                <el-form-item label="申诉人名称">
                    <el-input v-model="tableSearchParam.createdUserName" style="width:200px" size="small"
                              clearable></el-input>
                </el-form-item>
                <el-form-item label="申诉类型">
                    <el-select v-model="tableSearchParam.complaintType" clearable placeholder="请选择">
                        <el-option
                                v-for="item in complaintTypeList"
                                :value="item.label"
                                :key="item.id"
                                :label="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="tableSearchParam.statusId" clearable placeholder="请选择">
                        <el-option
                                v-for="item in statusList"
                                :value="item.statusId"
                                :key="item.statusId"
                                :label="item.statusName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" icon="el-icon-search" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--列表部分-->
        <el-table :data="dataList" highlight-current-row v-loading="listLoading">
            <el-table-column prop="id" label="单号" width="200"/>
            <el-table-column prop="createdUserName" label="申诉人名称" width="200"/>
            <el-table-column prop="statusName" label="状态" width="200"/>
            <el-table-column prop="createdDate" label="创建时间" width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.createdDate}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="complaintType" label="申诉原因" width="200"/>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="showDetail(scope.row)" icon="el-icon-document">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=this.pagination.pageNum
                    :page-sizes="[20, 50, 100]"
                    :page-size=this.pagination.pageSize
                    layout="total, sizes, prev, pager, next"
                    :total=this.pagination.total style="float:right;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getPage} from '@/api/complaintOrderApi'
    import { formatDate } from '@/utils/dateUtil'
    import dictionaryApi from '@/api/dictionaryApi'
  export default {
    name: 'index',data() {
      return {
        primaryKey: 'id',
        tableSearchParam: {},
        listLoading: false,
        pagination: {
          showSizeChanger: true,
          pageSize: 20,
          pageNum: 1,
          total: 0
        },
        statusList: [
          { statusId: '10', statusName: '新建' },
          { statusId: '20', statusName: '进行中' },
          { statusId: '1000', statusName: '已完成' }
        ],
        complaintTypeList:[],
        loading: false,
        dataList: [],
      }
    },
    methods: {
      showDetail(row) {
        sessionStorage.setItem('complaintOrderId', row[this.primaryKey])
        this.$router.push('/complaintOrder/detail')
      },
      getAllDictionary(){
        dictionaryApi.listAll(null,res=>{
          let complaintTypeId = '';
          res.forEach(e=>{
            if(e.value==='COMPLAINT_TYPE'){
              complaintTypeId = e.id
            }
          });
          if(complaintTypeId){
            dictionaryApi.listAll({parentId:complaintTypeId},resp=>{
              this.complaintTypeList = resp;
            })
          }

        })
      },
      queryData() {
        const queryParams = {
          criteria: {
            ...this.tableSearchParam
          },
          pageDto: {
            ...this.pagination
          }
        }
        getPage(queryParams).then(response => {
          if (!response.hasError) {
            this.dataList = []
            const { list = [] } = response.result
            if(list.length>0){
              this.dataList = list.map(item=>{
                return {...item,createdDate: formatDate(item.createdDate)}
              })
            }
            this.pagination.total = response.result.total
          }
        })
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.queryData()
      },
      handleCurrentChange(val) {
        this.pagination.pageNum = val
        this.queryData()
      },
    },
    mounted() {
      this.queryData();
      this.getAllDictionary();
    }
  }
</script>

<style scoped>

</style>
